<template>
  <s-page custom-class="Button-Page">
    <c-demo-block title="按钮类型">
      <s-button>默认按钮</s-button>
      <s-button type="primary">主要按钮</s-button>
      <s-button type="info">信息按钮</s-button>
      <s-button type="success">成功按钮</s-button>
      <s-button type="warning">警告按钮</s-button>
      <s-button type="danger">危险按钮</s-button>
    </c-demo-block>

    <c-demo-block title="朴素按钮">
      <s-button plain>默认按钮</s-button>
      <s-button type="primary" plain>主要按钮</s-button>
      <s-button type="success" plain>成功按钮</s-button>
    </c-demo-block>

    <c-demo-block title="细边框">
      <s-button plain hairline>细边框按钮</s-button>
      <s-button type="primary" plain hairline>细边框按钮</s-button>
      <s-button type="success" plain hairline>细边框按钮</s-button>
    </c-demo-block>

    <c-demo-block title="按钮形状">
      <s-button type="primary" shape="square">方形按钮</s-button>
      <s-button type="primary" plain shape="round">圆角按钮</s-button>
      <s-button type="success" shape="circle" icon="wechat" icon-size="48" width="88" height="88" />
      <s-button type="success" shape="circle" plain width="88" height="88">
        <s-icon name="wechat" size="48" />
      </s-button>
    </c-demo-block>

    <c-demo-block title="图标按钮">
      <s-button type="success" icon="plus" />
      <s-button type="primary" icon="plus">按钮</s-button>
      <s-button type="primary" plain icon="https://img01.yzcdn.cn/vant/user-active.png">按钮</s-button>
    </c-demo-block>

    <c-demo-block title="文字按钮">
      <s-button type="text">文字按钮</s-button>
      <s-button type="text" disabled>禁用按钮</s-button>
      <s-button type="text" color="red">文字颜色</s-button>
    </c-demo-block>

    <c-demo-block title="禁用状态">
      <s-button type="primary" disabled>主要按钮</s-button>
      <s-button type="success" disabled>成功按钮</s-button>
    </c-demo-block>

    <c-demo-block title="加载状态">
      <s-button loading type="success" />
      <s-button loading type="success" loading-type="spinner" />
      <s-button loading type="primary" loading-text="加载中..." />
    </c-demo-block>

    <c-demo-block title="按钮尺寸">
      <s-button type="primary" size="large">大号按钮</s-button>
      <s-button type="primary">默认按钮</s-button>
      <s-button type="primary" size="small">小型按钮</s-button>
      <s-button type="primary" size="mini">迷你按钮</s-button>
    </c-demo-block>

    <c-demo-block title="块级元素">
      <s-button type="primary" block>块级元素</s-button>
    </c-demo-block>

    <c-demo-block title="自定义颜色">
      <s-button color="#7232dd">单色按钮</s-button>
      <s-button color="#7232dd" plain>单色按钮</s-button>
      <s-button color="linear-gradient(to right, #ff6034, #ee0a24)"> 渐变色按钮 </s-button>
    </c-demo-block>

    <c-demo-block title="事件">
      <s-button type="primary" block @click="onClick">点击</s-button>
      <!-- #ifdef MP-WEIXIN -->
      <s-button type="primary" block open-type="share">分享</s-button>
      <s-button type="primary" block open-type="contact">客服</s-button>
      <!-- #endif -->
    </c-demo-block>
  </s-page>
</template>

<script>
export default {
  methods: {
    onClick(e) {
      uni.showToast({
        title: '点击事件',
        icon: 'none',
      });
    },
  },
};
</script>
<style lang="scss">
.Button-Page {
  padding: 0 $padding-md;
  ::v-deep {
    .c-demo-block {
      &:not(:last-child) {
        padding-bottom: 0;
      }
      .s-button {
        margin-right: 20rpx;
        margin-bottom: 20rpx;
        &--block,
        &--large {
          margin-right: 0;
        }
      }
    }
  }
}
</style>
